<template>
  <div class="bind-wx">
    <div class="bottom" :style="{backgroundImage: 'url(' + bgc + ')' }">
      <div id="qrcode" ref="qrCodeUrl"></div>
      <!-- <img src="" alt=""> -->
    </div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
import { getBindWx } from "@/api/http/user";
export default {
  data() {
    return {
      bindUrl:"",
      bgc:
        "https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/1abd99a4e1de90ea75416e670268a148faf989bf.png"
    };
  },
  created() {
      this.getBindWx();
  },
  methods: {
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.bindUrl,
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
      // console.log(qrcode, "-0");
      // console.log(this.$refs.qrCodeUrl, "-01");
    },
    // 获取绑定微信的URL地址
    getBindWx(){
      getBindWx().then(res=>{
        if(res.code == 200){
          this.bindUrl = res.data[0];
          this.creatQrCode();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.bottom {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 60px;
  background-size: 400px 400px;
  background-repeat: no-repeat;
  #qrcode {
    position: absolute;
    left: 50%;
    top: 90px;
    transform: translate(-50%);
    width: 200px;
    height: 200px;
    // background-color: red;
  }
}
</style>
